<template>
	<view class="emp-bind-machine-container">
    <view class="emp-info-box">
      <view class="emp-info-left">
        <view class="emp-info-left-title">
          <view class="emp-info-left-name">{{ ruleForm.name || '暂无' }}</view>
          <view class="emp-info-left-group-name">{{ ruleForm.groupName || '暂无' }}</view>
        </view>
        <view class="emp-info-left-other">
          <view class="emp-info-left-other-item">
            <u-icon name="home" size="18" color="#edeef1"></u-icon>
            <text class="emp-info-left-other-item-val">{{ ruleForm.workshopName || '暂无' }}</text>
          </view>
          <view class="emp-info-left-other-item">
            <u-icon name="man-add" size="19" color="#edeef1"></u-icon>
            <text class="emp-info-left-other-item-val">{{ ruleForm.postName || '暂无' }}</text>
          </view>
        </view>
      </view>
      <view class="emp-info-right">
        <u-image :showLoading="true" :src="src" shape="circle" width="110px" height="110px"></u-image>
      </view>
    </view>
    <view class="emp-bind-machine-content">
      <view class="margin-bottom-10 flex-between-center">
        <u-tag :text="`责任机台: ${tableData.length}`" size="large"></u-tag>
        <u-icon @click="onInfoIcon" name="info-circle" size="20"></u-icon>
      </view>
      <view class="machine-table-container">
        <view class="machine-table-head">
          <u-row>
            <u-col :span="3">
              <view class="machine-table-cell-item">设备</view>
            </u-col>
            <u-col :span="3">
              <view class="text-right">开始锭数</view>
            </u-col>
            <u-col :span="3">
              <view class="text-right">结束锭数</view>
            </u-col>
            <u-col :span="3">
              <view class="text-right">锭数</view>
            </u-col>
          </u-row>
        </view>
        <view class="machine-table-body" :style="{ height: `${tableHeight}px` }">
          <view
              v-for="(item, index) in tableData"
              :key="item.machineId"
              hover-class="machine-table-tr-hover-class"
              class="machine-table-tr"
              @longpress="onLongPress(item, index)"
          >
            <u-row>
              <u-col :span="3">
                <view class="machine-table-cell-item">{{ item.machineName }}</view>
              </u-col>
              <u-col :span="3">
                <view class="text-right">{{ item.startSpinNumber }}</view>
              </u-col>
              <u-col :span="3">
                <view class="text-right">{{ item.endSpinNumber }}</view>
              </u-col>
              <u-col :span="3">
                <view class="text-right">{{ item.openSpinCount }}</view>
              </u-col>
            </u-row>
          </view>
        </view>
        <view class="operation-box">
          <u-button @click="selectMachineModalState = true" type="default" :customStyle="{color: '#808695'}" size="normal">
            <view class="item-gap"><u-icon name="plus" size="14" color="#808695"></u-icon></view>
            <view>添加设备</view>
          </u-button>
        </view>
      </view>
      <view class="operation-box">
        <u-button @click="onConfirmBtn" color="#2d8cf0" :loading="confirmLoading" iconColor="#fff" size="large">确定</u-button>
      </view>
    </view>
    <u-modal :show="showOperationTipShow" @cancel="onCancelOfTipModal" @confirm="onConfirmOfTipModal" @close="showOperationTipShow = false" title="提示" :closeOnClickOverlay="true" :showCancelButton="true" cancel-text="删除" confirm-text="编辑">
      <view slot="default" style="width: 100%; position: relative">
        <view @click="showOperationTipShow = false" style="position: absolute; top: -40px; right: -10px;">
          <u-icon name="close" size="22"></u-icon>
        </view>
        <view class="text-center">你是要删除、编辑？</view>
        <view class="color3 font-size-12 text-center margin-top-10">（关闭请点击空白处）</view>
      </view>
    </u-modal>
    <!--编辑锭数-->
    <editModal
        :show="editModalState"
        :formData="operationRowItem"
        @close="editModalState = false"
        @confirm="onConfirmOfEditModal"
    ></editModal>
    <!--选择机台-->
    <selectMachineModal
        :hasList="tableData"
        :windowHeight="windowHeight"
        :show="selectMachineModalState"
        @close="selectMachineModalState = false"
        @confirm="onConfirmOfSelectMachineModal"
    ></selectMachineModal>
  </view>
</template>

<script>
import {
  empListWithMachine, empMachineSaveWrap,
} from "../../../api";
  import {showLoading, tipBar} from "../../../utils/jk-utils";
  import jkPopup from '../../../jk-components/jk-popup';
  import editModal from './components/edit-modal';
  import selectMachineModal from './components/select-machine-modal';

  export default {
    components: {
      jkPopup,
      editModal,
      selectMachineModal
    },
    data() {
			return {
        windowHeight: 0,
        selectMachineModalState: false,
        operationRowItem: {
          startSpinNumber: 0,
          endSpinNumber: 0
        },
        editModalState: false,
        operationIndex: null,
        showOperationTipShow: false,
        tableHeight: 0,
        src: '/static/default-avatar.png',
        confirmLoading: false,
        empItem: {},
        ruleForm: {},
        tableData: []
			}
		},
		onLoad(payload) {
      this.empItem.id = Number(payload.id);
      this.empItem.name = payload.name;
		},
    onShow() {
      this.getDependentData();
      this.getSystemInfo();
    },
		methods: {
      onInfoIcon() {
        uni.showModal({ title: '提示', content: '长按进行操作!', showCancel: false, confirmText: '关闭' });
      },
      onConfirmOfSelectMachineModal(list) {
        if (list && list.length) {
          list.forEach(x => {
            this.tableData.push({
              machineId: x.id,
              machineCode: x.code,
              machineName: x.name,
              startSpinNumber: 1,
              endSpinNumber: x.spinCount,
              openSpinCount: x.spinCount
            })
          });
          this.selectMachineModalState = false;
        }
      },
      onConfirmOfEditModal(formData) {
        let cpData = JSON.parse(JSON.stringify(formData))
        if (Number(cpData.startSpinNumber) < Number(cpData.endSpinNumber)) {
          this.tableData.forEach(item => {
            if (item.machineId === cpData.machineId) {
              this.$set(item, 'startSpinNumber', cpData.startSpinNumber);
              this.$set(item, 'endSpinNumber', cpData.endSpinNumber);
              this.$set(item, 'openSpinCount', (cpData.endSpinNumber - cpData.startSpinNumber) + 1);
            }
          })
          this.operationRowItem = { startSpinNumber: 0, endSpinNumber: 0 };
          this.editModalState = false;
        } else {
          tipBar('custom', '锭数输入不准确', 'error');
        }
      },
      onConfirmOfTipModal() {
        this.editModalState = true;
        this.showOperationTipShow = false;
        this.operationIndex = null;
      },
      onCancelOfTipModal() {
        if (this.operationIndex || this.operationIndex === 0) {
          this.tableData.splice(this.operationIndex, 1);
          this.operationRowItem = {};
        } else {
          tipBar('none');
        }
        this.operationIndex = null;
        this.showOperationTipShow = false;
      },
      onLongPress(rowItem, index) {
        this.operationRowItem = JSON.parse(JSON.stringify(this.tableData[index]));
        this.operationIndex = index;
        this.showOperationTipShow = true;
      },
      getSystemInfo() {
        let _this = this;
        uni.getSystemInfo({
          success(res) {
            _this.windowHeight = res.windowHeight;
            _this.tableHeight = res.windowHeight - 150 - 30 - 42 - 50 - 120;
          }
        });
      },
      onConfirmBtn() {
        this.confirmLoading = true;
        let params = {
          empId: this.empItem.id,
          empMachineList: this.tableData.map(x => x),
          id: this.empItem.id
        }
        empMachineSaveWrap(params).then(res => {
          this.confirmLoading = false;
          if (res.data.status === 200) {
            uni.navigateBack({ delta: 1 });
            tipBar('save');
          }
        });
      },
      // 获取人员和机台绑定的详情，由于原系统没有detail只能用list接口代替
      getEmpListWithMachineDetailRequest() {
        return empListWithMachine({ "name": this.empItem.name }).then(res => {
          if (res.data.status === 200) {
            if (res.data.res && res.data.res.length) {
              res.data.res.forEach(x => {
                if (x.id === this.empItem.id) {
                  this.ruleForm = JSON.parse(JSON.stringify(x));
                }
              })
              this.tableData = this.ruleForm.empMachineList.map(x => {
                delete x.id;
                delete x.empId;
                return x;
              });
            }
          }
        })
      },
      async getDependentData() {
        showLoading(true);
        await this.getEmpListWithMachineDetailRequest();
        showLoading(false);
      }
		}
	}
</script>

<style lang="scss" scoped>
  .machine-table-tr-hover-class {
    background: rgba(45, 140, 240, .2);
    //color: #fff!important;
  }
  .emp-bind-machine-container {
    width: 100%;
    box-sizing: border-box;
    .emp-info-box {
      height: 150px;
      background-image: linear-gradient(-0deg, rgba(87,140,243,1) 0%, rgba(17,120,240,1) 48%, rgba(33,61,198,1) 100%);
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      padding: 32rpx;
      box-sizing: border-box;
      .emp-info-left {
        color: #fff;
        .emp-info-left-title {
          margin-bottom: 30rpx;
          display: flex;
          align-items: flex-end;
          .emp-info-left-name {
            font-size: 44rpx;
            font-weight: 700;
            letter-spacing: 4rpx;
          }
          .emp-info-left-group-name {
            font-size: 28rpx;
            margin-left: 20rpx;
            color: #edeef1;
          }
        }
        .emp-info-left-other {
          font-size: 28rpx;
          display: flex;
          align-items: center;
          color: #edeef1;
          .emp-info-left-other-item {
            margin-right: 12rpx;
            display: flex;
            align-items: center;
            .emp-info-left-other-item-val {
              margin-left: 8rpx;
            }
          }
        }
      }
      .emp-info-right {

      }
    }
    .operation-box {
      margin-top: 20rpx;
    }
	}
  .emp-bind-machine-content {
    padding: 28rpx 32rpx;
    .machine-table-container {
      background: #f8f8f9;
      border-radius: 8rpx;
      overflow: hidden;
      .machine-table-cell-item {
        margin: 8rpx 0;
      }
      .machine-table-head {
        background: #e8eaec;
        color: #808695;
        font-size: 26rpx;
        padding: 16rpx 8rpx;
      }
      .machine-table-body {
        overflow: auto;
        .machine-table-tr {
          color: #515a6e;
          font-size: 26rpx;
          padding: 16rpx 8rpx;
          border-radius: 4rpx;
        }
      }
    }
  }
</style>
